今天要做的是CSS變數與JS的互動介面，設計三個控制項，調整圖片的外框大小、模糊以及顏色，範例如下：
CSS Variables實作範例

邏輯流程

1. 給定CSS變數
2. 讓img使用CSS變數
3. 監聽三個控制項的值
4. 改變CSS變數的值

課程重點

1. CSS變數宣告：--variable:value，變數宣告必須以兩個減號開頭。
2. CSS變數使用：var(--variable)，使用變數需以var()來包住變數。
3. 利用data-attribute(第一堂提過的屬性)來設定CSS變數的單位。
4. 利用document.documentElement.style.setProperty()來更新CSS變數。

延伸閱讀

• NodeList和Array差別：實作中querySelectorAll()所取得的element會被包成一個看起來像Array的陣列，但他事實上是NodeList而不是Array。NodeList是可以轉換成Array的，而他們的差異是在於能夠使用的函式不一樣，NodeList只有少數幾個，Array有一大串的函數可以用。

• label的for屬性：使label跟其他element綁在一起，如下方參考來源網站的範例，label和radio button綁在一起，這時候點選label文字也能夠觸發click。

• Chrome console裡變數的__proto__屬性，記錄該變數型態所能使用的函式。

• 實作中用到this.dataset，dataset就是將該element所有的data-attribute組成的一個物件。

• 實作中在宣告suffix時用到了||，因為base這個element沒有data-sizing這個屬性，若不加入||''，會是undefined

  onst suffix = this.dataset.sizing||''
  ``
  

參考來源

• SASS, LESS 退散，原生 CSS 可以使用變數啦！
• label的for屬性